<template>
  <div class="sp-layout__header-notice">
    <marquee onmouseover=this.stop() onmouseout=this.start() class="text" scrollamount="3">{{ text }}</marquee>
    <div class="item_time">{{ nowTime }}</div>
  </div>
</template>
<script>
  export default {
    name: "sHint",
    data() {
      return {
        nowTime: "",
      };
    },
    created() {
      setTimeout(() => {
        this.time = this.nowTimes()
      }, 1);
      setInterval(() => {
        this.time = this.clear()
        setTimeout
      }, 1000);
    },
    methods: {
      timeFormate(timeStamp) {
        let year = new Date(timeStamp).getFullYear();
        let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(
          timeStamp).getMonth() + 1;
        let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp)
          .getDate();
        let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp)
          .getHours();
        let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp)
          .getMinutes();
        let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp)
          .getSeconds();
        let week = new Date(timeStamp).getDay();
        let weeks = ["日", "一", "二", "三", "四", "五", "六"];
        let getWeek = "星期" + weeks[week];
        this.nowTime = year + "年" + month + "月" + date + "日" + "     " + getWeek + "    " + hh + ":" + mm + ':' + ss;

      },

      //每秒定时器
      nowTimes() {
        this.timeFormate(new Date());
        setInterval(this.nowTimes, 1000);
        this.clear()
      },
      //清除定时器
      clear() {
        clearInterval(this.nowTimes)
        this.nowTimes = null;
      },
      // getNowFormatTime() {
      //   var date = new Date();
      //   var seperator1 = "/";
      //   var seperator2 = ":";
      //   var month = date.getMonth() + 1;
      //   var strDate = date.getDate();
      //   if (month >= 1 && month <= 9) {
      //     month = "0" + month;
      //   }
      //   if (strDate >= 0 && strDate <= 9) {
      //     strDate = "0" + strDate;
      //   }
      //   var days = date.getDay();
      //   switch (days) {
      //     case 1:
      //       days = "星期一";

      //       break;

      //     case 2:
      //       days = "星期二";

      //       break;

      //     case 3:
      //       days = "星期三";

      //       break;

      //     case 4:
      //       days = "星期四";

      //       break;

      //     case 5:
      //       days = "星期五";

      //       break;

      //     case 6:
      //       days = "星期六";

      //       break;

      //     case 0:
      //       days = "星期日";

      //       break;
      //   }
      //   var currentdate =
      //     date.getFullYear() +
      //     seperator1 +
      //     month +
      //     seperator1 +
      //     strDate +
      //     " " +
      //     date.getHours() +
      //     seperator2 +
      //     date.getMinutes() +
      //     seperator2 +
      //     date.getSeconds() +' '+days;
      //   return currentdate;
      // },
    },
    props: {
      text: {
        type: String,
      },
    },
  };
</script>

<style scoped>
  .item {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
  }

  .item_time {
    flex-shrink: 0;
    font-weight: 600;
  }

  .text {
    color: #F6502B;
    font-size: 16px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    line-height: 24px;
  }
</style>